<template>
    <div>
        <div>
            <slot name="title">
                <a-button :color="props.color" :disabled="props.disabled" :size="props.size" :sharp="props.sharp" @click="$emit('update:value', !value)">
                    <span>{{ props.title }}</span>
                    <span>
                        <span class="fa fa-fw fa-angle-right" v-if="!props.value"></span>
                        <span class="fa fa-fw fa-angle-down" v-else></span>
                    </span>
                </a-button>
            </slot>
        </div>
        <div v-show="props.value">
            <slot></slot>
        </div>
    </div>
</template>

<script setup lang="ts">
import { ColorType, SizeType } from '@/types'
import AButton from './AButton.vue'

interface PropsType {
    color?: ColorType
    disabled?: boolean
    size: SizeType
    sharp?: boolean
    title?: string
    value?: boolean
}
const props = withDefaults(defineProps<PropsType>(), {
    color: 'default',
    disabled: false,
    size: 'm',
    sharp: false,
    title: undefined,
    value: false,
})
</script>